<template>
	<jk-card>
		<el-row ref="box1" class="margin-bottom-10">
			<el-col :span="8">
				<currentTime :current-time="currentTime"></currentTime>
			</el-col>
			<el-col :span="8" class="flex-center">
				<div
					v-for="(item, index) in stateList"
					:key="index"
					class="margin-right-10"
				>
					<jkStateBar :state="item.id" :state-list="stateList"></jkStateBar>
				</div>
			</el-col>
			<el-col :span="8" class="flex-end-center">
				<el-button circle icon="el-icon-refresh" :loading="refreshBtnLoading" size="small" type="primary" @click="onRefreshBtn"></el-button>
			</el-col>
		</el-row>
		<article class="machine-list-box" :style="{ height: `${tableHeight + 50}px` }">
			<div class="machine-list-box-inner">
				<el-row :gutter="10">
					<el-col
						v-for="(item) in tableData"
						:key="item.macId"
						:xl="4"
						:lg="4"
						:md="6"
						:sm="6"
						:xs="8"
					>
						<div class="machine-item" :style="{ borderColor: setColor(item.CurMachineStatus) }" @click="onSeeDetail(item)">
							<div class="machine-item-head" :style="{ background: setColor(item.CurMachineStatus) }">
								<jk-progress :stroke-width="6" :show-custom-text="true" :custom-text-style="{ fontSize:'12px' }" :show-text="false" type="circle" :color="setBgColor(item.CurMachineStatus)" :width="50" :percentage="item.runningSpeed || 0"></jk-progress>
								<div>{{ item.macId }}号</div>
							</div>
							<div class="machine-item-content">
								<div>当前断头：{{ item.realTimeBreakNum || 0 }}</div>
								<div>当前弱捻：{{ item.realTimeWeakNum || 0 }}</div>
								<div>当前空锭：{{ item.realEmptyNum || 0 }}</div>
								<div>罗拉速度：{{ item.rollerSpeed || 0 }}</div>
								<div>平均锭速：{{ item.averageSpeed || 0 }}</div>
								<div>产量(kg)：{{ item.actualWeight || 0 }}</div>
								<div>捻度：{{ '无' }}</div>
							</div>
						</div>
					</el-col>

					<el-col
						v-for="(item) in tableData2"
						:key="item.MachineName"
						:xl="4"
						:lg="4"
						:md="6"
						:sm="6"
						:xs="8"
					>
						<div class="machine-item" :style="{ borderColor: setColor(item.CurMachineStatus) }" @click="onSeeDetail2(item)">
							<div class="machine-item-head" :style="{ background: setColor(item.CurMachineStatus) }">
								<jk-progress :stroke-width="6" :show-custom-text="true" :custom-text-style="{ fontSize:'12px' }" :show-text="false" type="circle" :color="setBgColor(item.CurMachineStatus)" :width="50" :percentage="item.CurEff ? parseFloat(item.CurEff.toFixed(1)) : 0"></jk-progress>
								<div>{{ item.MachineName }}</div>
							</div>
							<div class="machine-item-content">
								<div>当前断头：{{ item.CurEBreak || 0 }}</div>
								<div>当前弱捻：{{ item.CurSlipBreak || 0 }}</div>
								<div>当前空锭：{{ item.CurIdleBreak || 0 }}</div>
								<div>罗拉速度：{{ item.MpM || 0 }}</div>
								<div>平均锭速：{{ item.AverRPM || 0 }}</div>
								<div>产量(kg)：{{ item.KG || 0 }}</div>
								<div>捻度：{{ item.TPM }}</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</article>
		<detail-dialog
			:state-list="stateList"
			:data-item="dataItem"
			:if-test="ifTest"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
		<detail-dialog2
			ref="detailDialog2"
			:machine-list="tableData2"
			:data-item="dataItem"
			:if-test="ifTest"
			:dialog-state="detailDialogState2"
			@on-visible-change="onVisibleChangeOfDetailDialog2"
		></detail-dialog2>
	</jk-card>
</template>
<script>
    import calHeight from '../../../mixins/cal-table-height';
    import { krGetMachineInfoList, spinReportGetBreakData } from '../../../api/production/xsReport';
    import detailDialog from './detail-dialog';
    import detailDialog2 from './detail-dialog2';
    import jkProgress from '../../jk-components/jk-progress';
    import { formatTime } from '../../../utils/jk/jk-tool';
    import currentTime from '../../productionMonitor/energyAnalysis/components/current-time';

    export default {
        mixins: [calHeight],
        components: {
            currentTime,
            jkProgress,
            detailDialog,
            detailDialog2
        },
        data() {
            return {
                interVal: {},
                detailDialogState2: false,
                dataItem: {},
                detailDialogState: false,
                refreshBtnLoading: false,
                stateList: [
                    { id: 2, name: '正常', color: '#19be6b', bgColor: '#0d9e55' },
                    { id: 1, name: '开车', color: '#2d8cf0', bgColor: '#237bd9' },
                    { id: 0, name: '停车', color: '#F95457', bgColor: '#df4e50' },
                    { id: 3, name: '落纱', color: '#ff9900', bgColor: '#ea8e05' },
                    { id: 4, name: '等待', color: '#e418a9', bgColor: '#e418a9' },
                    { id: -1, name: '故障', color: '#7F7F7F', bgColor: '#6b6e6d' }
                ],
                tableData: [],
                tableData2: [],
                currentTime: '',
                interVal2: {},
                ifTest: process.env.VUE_APP_MODE === 'development'
            };
        },
        methods: {
            setBgColor(status) {
                const v = this.stateList.find(x => x.id === status) || {};
                return v.bgColor;
            },
            onSeeDetail2(e) {
                this.dataItem = e;
                this.detailDialogState2 = true;
            },
            onVisibleChangeOfDetailDialog2(e) {
                if (!e) {
                    this.dataItem = {};
                }
                this.detailDialogState2 = e;
            },
            onSeeDetail(e) {
                this.dataItem = e;
                this.detailDialogState = true;
            },
            onVisibleChangeOfDetailDialog(e) {
                if (!e) {
                    this.dataItem = {};
                }
                this.detailDialogState = e;
            },
            onRefreshBtn() {
                this.tableData = [];
                this.tableData2 = [];
                this.getDependentData();
            },
            setColor(status) {
                const v = this.stateList.find(x => x.id === status) || {};
                return v.color;
            },
            // 获取凯瑞的机台
            getListRequest() {
                return krGetMachineInfoList({
                    ifTest: this.ifTest
                }).then(res => {
                    if (res.data.status === 200) {
                        this.tableData = res.data.res ? res.data.res.map(x => {
                            /**
                             * runningStatus0: "正在纺纱",
                            runningStatus1: "中途停车",
                            runningStatus2: "中途停车",
                            runningStatus3: "正在落纱",
                             * */
                            // 将凯瑞的状态和尤里卡的状态对应起来
                            if (Number(x.status) === 0) {
                                x.CurMachineStatus = 2;
                            } else if (Number(x.status) === 1 || Number(x.status) === 2) {
                                x.CurMachineStatus = 0;
                            } else if (Number(x.status) === 3) {
                                x.CurMachineStatus = 3;
                            } else {
                                x.CurMachineStatus = 3;
                            }
                            return x;
                        }) : [];
                        // 根据机台编号排序
                        this.tableData.sort((a, b) => {
                            return a.macId - b.macId;
                        });
                    }
                });
            },
            // 获取尤里卡的机台
            getListRequest2() {
                return spinReportGetBreakData({
                    ifTest: this.ifTest
                }).then(res => {
                    if (res.data.status === 200) {
                        this.tableData2 = res.data.res ? res.data.res.map(x => {
                            return x;
                        }) : [];
                    }
                });
            },
            runTime() {
                this.currentTime = formatTime(Date.now());
                this.interVal2 = setInterval(() => {
                    this.currentTime = formatTime(Date.now());
                }, 1000);
            },
            runData() {
                this.getDependentData();
                clearInterval(this.interVal);
                this.interVal = setInterval(() => {
                    this.getDependentData();
                }, 5000);
            },
            async getDependentData() {
                this.refreshBtnLoading = true;
                await this.getListRequest();
                await this.getListRequest2();
                this.refreshBtnLoading = false;
            }
        },
        mounted() {
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
                _this.runTime();
                _this.runData();
            });
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(this.interVal);
            clearInterval(this.interVal2);
            if (this.$refs.detailDialog2) {
                this.detailDialogState2 = false;
                this.$refs.detailDialog2.clearTimer();
            }
            next();
        }
    };
</script>
<style scoped lang="scss">
    $border_color: #e8eaec;
    .machine-list-box {
        width: 100%;
        height: 100%;
        padding: 10px;
        border: solid 1px $border_color;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 6px;
        .machine-list-box-inner {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            box-sizing: border-box;
            .machine-item {
                height: 124px;
                //box-shadow: 0 0 2px 1px $border_color;
                margin-bottom: 10px;
                border-radius: 6px;
                border: solid 1px #eee;
                display: flex;
                overflow: hidden;
                cursor: pointer;
                .machine-item-head {
                    width: 70px;
                    height: 100%;
                    border-right: solid 1px $border_color;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    background: #f8f8f9;
                    font-size: 15px;
                    color: #e8eaec;
                    flex-shrink: 0;
                }
                .machine-item-content {
                    height: 100%;
                    padding: 4px;
                    box-sizing: border-box;
                    font-size: 12px;
                    white-space: nowrap;
                    color: #808695;
                }
            }

        }
    }
</style>
